import React, { useEffect } from 'react';
import * as echarts from 'echarts';
interface Props {}

const Welcome = (props: Props) => {
  useEffect(() => {
    var chartDom: any = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option: any;

    option = {
      title: {
        text: '一天用电量分布',
        subtext: '纯属虚构',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '00:00',
          '01:15',
          '02:30',
          '03:45',
          '05:00',
          '06:15',
          '07:30',
          '08:45',
          '10:00',
          '11:15',
          '12:30',
          '13:45',
          '15:00',
          '16:15',
          '17:30',
          '18:45',
          '20:00',
          '21:15',
          '22:30',
          '23:45',
        ],
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} W',
        },
        axisPointer: {
          snap: true,
        },
      },
      visualMap: {
        show: false,
        dimension: 0,
        pieces: [
          {
            lte: 6,
            color: 'green',
          },
          {
            gt: 6,
            lte: 8,
            color: 'red',
          },
          {
            gt: 8,
            lte: 14,
            color: 'green',
          },
          {
            gt: 14,
            lte: 17,
            color: 'red',
          },
          {
            gt: 17,
            color: 'green',
          },
        ],
      },
      series: [
        {
          name: '用电量',
          type: 'line',
          smooth: true,
          data: [
            300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
            500, 600, 750, 800, 700, 600, 400,
          ],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
            },
            data: [
              [
                {
                  name: '早高峰',
                  xAxis: '07:30',
                },
                {
                  xAxis: '10:00',
                },
              ],
              [
                {
                  name: '晚高峰',
                  xAxis: '17:30',
                },
                {
                  xAxis: '21:15',
                },
              ],
            ],
          },
        },
      ],
    };

    option && myChart.setOption(option);
    // const main: any = document.querySelector('#main');
    // var myChart = echarts.init(main); // 指定图表的配置项和数据
    // var option = {
    //   title: {
    //     text: 'ECharts 入门示例',
    //   },
    //   tooltip: {},
    //   legend: {
    //     data: ['销量'],
    //   },
    //   xAxis: {
    //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: '销量',
    //       type: 'bar',
    //       data: [5, 20, 36, 10, 10, 20],
    //     },
    //   ],
    // };

    // // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
  }, []);
  return (
    <div>
      111
      <div id="main" style={{ width: '300px', height: '300px' }}></div>
    </div>
  );
};

export default Welcome;
